import NavBar from './components/NavBar'
import Menu from './components/Menu'
import Cart from './components/Cart'
import FoodsCategory from './components/FoodsCategory'
import { useSelector, useDispatch } from "react-redux";
import { fetchFoodsList } from "./store/modules/takeaway";

import './App.scss'
import { useEffect, useState } from 'react';

const App = () => {
  const dispatch = useDispatch()
  const foodsList = useSelector(state => state.takeaway.foodsList)
  const activeMenu = useSelector(state => state.takeaway.activeMenu)
  const [nowShowList, setNowShowList ] = useState([])

  
  useEffect(() => {
    dispatch(fetchFoodsList())
  }, [dispatch])

  useEffect(() => {
  },[ activeMenu ])

  // setTimeout(() => {
  //   document.querySelector('#a82022594').scrollIntoView({
  //     behavior: 'smooth', // 平滑滚动
  //     block: 'start' // 对齐到目标元素的顶部
  // });
  // console.log()
  // }, 3000);

  return (
    <div className="home">
      {/* 导航 */}
      <NavBar />

      {/* 内容 */}
      <div className="content-wrap">
        <div className="content">
          <Menu />
          <div className="list-content">
            <div className="goods-list">
              {/* 外卖商品列表 */}
              {foodsList.map(item => {
                return (
                  <FoodsCategory
                    id={item.tag}
                    key={item.tag}
                    // 列表标题
                    name={item.name}
                    // 列表商品
                    foods={item.foods}
                  />
                )
              })}
            </div>
          </div>
        </div>
      </div>

      {/* 购物车 */}
      <Cart />
    </div>
  )
}

export default App
